<template>
  <KView class="my-coupon-page">
    <KView class="my-coupon-page-header">
      <span>我的优惠券</span>
      <KView class="page-header-back" @click="toBack">
        <sys-svg name="arrowLeft" color="#ffffff"></sys-svg>
      </KView>
    </KView>
    <KView class="my-coupon-page-content" v-if="isShow">
      <template v-if="couponList.length>0">
        <KView class="my-coupon-page-stat">已领取{{pagination.currentPage}}张优惠券</KView>
        <KView class="my-coupon-page-content-list">
          <coupon-data-view is-self :coupon-list="couponList" :pagination="pagination" :next-data-fun="setCouponList"></coupon-data-view>
        </KView>
      </template>
      <KView v-else class="my-coupon-page-nodata flex-central">
        <span>暂无优惠券</span>
      </KView>
    </KView>
  </KView>
</template>

<script>
  import SystemUtil from 'utils/systemUtil';
  import Pagination from 'models/pagination';
  import CouponApi from 'services/couponApi';

  import SysSvg from 'common/sysSvg';
  import CouponDataView from './couponDataView';

  export default {
    data() {
      return {
        isShow: false,
        isMiniprogram: process.env.isMiniprogram,
        pagination: null,
        couponList: []
      };
    },

    created() {
      let pagination = new Pagination(20);
      SystemUtil.showLoading('');
      return this.setCouponList(true, pagination).then(() => {
        this.pagination = pagination;
        this.isShow = true;
        SystemUtil.hideLoading();
      }).catch(() => {
        SystemUtil.hideLoading();
      });
    },

    methods: {
      setCouponList(isInit = false, pagination = null) {
        if (pagination === null) {
          pagination = this.pagination;
        }

        return CouponApi.getMyCouponList(pagination).then(couponList => {
          if (isInit) {
            this.couponList = couponList;
          } else {
            this.couponList.push(...couponList);
          }
          return couponList;
        });
      },

      toBack() {
        if (!this.isMiniprogram) {
          window.history.back();
          return;
        }
        wx.navigateBack();
      }
    },

    components: {
      SysSvg,
      CouponDataView
    }
  };

</script>

<style lang="scss">
  .my-coupon-page {
    height: 100%;
    background: #f4f4f4;

    .my-coupon-page-header {
      padding: formatPx(20) formatPx(30);
      height: formatPx(40);
      text-align: center;
      font-size: formatPx(36);
      line-height: formatPx(40);
      position: relative;
      color: #ffffff;
      background: #59c264;

      .page-header-back {
        position: absolute;
        width: formatPx(36);
        height: formatPx(40);
        left: formatPx(30);
        top: formatPx(20);
      }
    }

    .my-coupon-page-content {
      height: calc(100% - #{formatPx(80)});

      .my-coupon-page-stat {
        height: formatPx(80);
        line-height: formatPx(80);
        padding: 0 formatPx(30);
        font-size: formatPx(26);
      }

      .my-coupon-page-content-list {
        height: calc(100% - #{formatPx(80)});
        overflow: auto;
      }

      .my-coupon-page-nodata {
        height: 100%;
        color: #999999;
        font-size: formatPx(50);
      }
    }
  }

</style>
